<template>
	<view class="list-bank">
		<scroll-view scroll-y class="bank-list">
			<view class="bank-item flex" v-for="(item,index) in userBankList" :key="index" @click="$common.navTo(`/pages/user_bank/detail?id=${item.id}`)">
				<image :src="item.bank_info.icon" class="img"></image>
				<view>{{item.bank_info.name}}</view>
			</view>
		</scroll-view>


		<view class="smt-btn-area">
			<view class="smt-btn" @click="$common.navTo('/pages/user_bank/add')">添加银行卡</view>
		</view>
	</view>
</template>

<script>
	import {userBankList} from "@/api/user/bank";

  export default {
		data() {
			return {
				userBankList:[],
			}
		},
		components: {

		},
		onLoad(query) {},
		async onShow(){
			await this.getUserBankList();
		},
		mounted() {},
		methods: {
			toBankDetail(item){
				this.$common.navTo("/pages/user_bank/detail?id"+item.id);
			},
			async getUserBankList() {
        userBankList().then(res=>{
          this.userBankList = res.data;
        })
			},
		}
	}
</script>

<style lang="scss">
	.list-bank{
		padding:20rpx 30rpx;
		height:100vh;
	}
	.bank-list{
		height:calc(100vh - 100rpx - 98rpx - 50rpx);
		.bank-item{
			width: 100%;
			height: 222rpx;
			padding:35rpx 50rpx 20rpx;
			color:#fff;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 14rpx;
			background-color: #C65255;
			border-radius: 7rpx;
		}
	}
	.img{
		width: 41rpx;
		height: 41rpx;
		margin-right: 14rpx;
	}
	.smt-btn-area{
		width: 100%;
		position: absolute;
		bottom:100rpx;
		.smt-btn{
			width: 707rpx;
			height: 98rpx;
			text-align: center;
			line-height:98rpx;
			color:#fff;
			border-radius: 49rpx;
			background: linear-gradient(-90deg, #37A9FF, #6DFFFF);
		}
	}
</style>
